<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .clearfix::after{
        display: table;
        clear: both;
        content: "";
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .banner{
        width: 1190px;
        margin: 0 auto ;
    }
    .img{
        width: 1190px;
        height: 80px;
        border-radius: 10px;
        background: rgba(197, 189, 189, 0.842);
    }
    .img_a{
        padding: 20px;
        box-sizing: border-box;
    }
    .title{
        padding: 30px;
        box-sizing: border-box;
    }
    a{
        text-decoration: none;
        padding:0px 16px;
        color: #2C2C29;
        font-family: 宋体;
        border-right: 1px #142735 solid;
    }
    a:last-of-type{
        border: none;
    }
    .icon{
        padding: 20px;
        box-sizing: border-box;
    }
    .icon img{
        padding: 10px;
        box-sizing: border-box;
        transition: transform 1.5s linear ;
    }
    .icon img:hover{
        transform: rotate(360deg);
    }
    .nav{
        width: 20px;
        position: absolute;
        left: 300px;
        top: 7px;
    }
    .nav_a{
        width: 20px;
        position: absolute;
        left: 500px;
        top: 7px;
    }
</style>
<body>

    <div class="banner ">
        <div class="img clearfix">
            <div class=" img_a fl">
                <img src="img/logo_170x46.png" alt="">
            </div>
            <div class="title fl">
                <div class="nav">
                    <img src="img/header_03.png" alt="">
                </div>
                <a href="">返回商城</a>
                <a href="" >商旅频道</a> 
                <div class="nav_a">
                    <img src="img/header_07.png" alt="">
                </div>
                <a href="">积分商城</a>
                <a href="">商旅频道</a>
                <a href="">了解彩贝</a>
                <a href="">彩贝活动</a>
                <a href="">个人中心</a>
            </div>
            <div class="icon">
                <img src="img/iconsB_11.gif" alt="">
                <img src="img/iconsB_12.gif" alt="">
                <img src="img/iconsB_13.png" alt="">
            </div>
        </div>
        
    </div>
    <a href="title.html">作业一</a>
    <a href="home.html">作业二</a>
    <a href="test.html">作业三</a>
    <a href="demo.html">作业四</a>
</body>
</html>